<template>
	<view>
		<!-- 样品 -->
		<view class="img-style" :animation="animCollect5" @click="collect">
			<text>样品信息</text>
		</view>
		<!-- 纱线 -->
		<view class="img-style" :animation="animCollect" @click="collect">
			<text>纱线信息</text>
		</view>
		<!-- 坯纱 -->
		<view class="img-style" :animation="animTranspond" @click="collect">
			<text>坯纱信息</text>
		</view>
		<!-- 原料 -->
		<view class="img-style" :animation="animInput" @click="collect">
			<text>原料信息</text>
		</view>
		<!-- 辅料 -->
		<view class="img-style" :animation="animIwert" @click="collect">
			<text>辅料信息</text>
		</view>
		<image src="https://www.ahlinghui.com/Uploads/image/20190429/images/yuanjia.png" class="img-plus-style" :animation="animPlus"
		 @click="plus"></image>
	</view>
</template>

<script>
	export default {
		name: 'AnminTion',
		data() {
			return {
				isPopping: false, //是否已经弹出
				animPlus: {}, //旋转动画
				animCollect: {}, //item位移,透明度
				animCollect5: {}, //item位移,透明度
				animTranspond: {}, //item位移,透明度
				animInput: {}, //item位移,透明度
				animIwert: {}
			}
		},
		methods: {
			collect() {

			},
			//点击弹出
			plus() {
				if (this.isPopping) {
					//缩回动画
					this.takeback();
					this.isPopping = false


				} else if (!this.isPopping) {
					//弹出动画
					this.popp();
					this.isPopping = true
				}
			},
			//弹出动画
			popp() {
				//plus顺时针旋转
				var animationPlus = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationcollect = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationcollect5 = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationTranspond = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationInput = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationIwert = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				animationPlus.rotateZ(180).step();
				animationcollect.translateY(-180).opacity(1).step();
				animationcollect5.translateY(-130).opacity(1).step();
				animationTranspond.translateY(-30).opacity(1).step();
				animationInput.translateY(-80).opacity(1).step();
				animationIwert.translateY(-230).opacity(1).step();
				this.animPlus = animationPlus.export(),
				this.animCollect = animationcollect.export(),
				this.animCollect5 = animationcollect5.export(),
				this.animTranspond = animationTranspond.export(),
				this.animInput = animationInput.export(),
				this.animIwert = animationIwert.export()
			},
			//收回动画
			takeback() {
				//plus逆时针旋转
				var animationPlus = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationcollect = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationcollect5 = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationTranspond = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationInput = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				var animationIwert = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease-out'
				})
				animationPlus.rotateZ(0).step();
				animationcollect.translate(0, 0).rotateZ(0).opacity(0).step();
				animationcollect5.translate(0, 0).rotateZ(0).opacity(0).step();
				animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step();
				animationInput.translate(0, 0).rotateZ(0).opacity(0).step();
				animationIwert.translate(0, 0).rotateZ(0).opacity(0).step();
				this.animPlus = animationPlus.export(),
				this.animCollect = animationcollect.export(),
				this.animCollect5 = animationcollect5.export(),
				this.animTranspond = animationTranspond.export(),
				this.animInput = animationInput.export(),
				this.animIwert = animationIwert.export()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.img-style {
		height: 80upx;
		width: 80upx;
		position: fixed;
		bottom: 200upx;
		right: 20upx;
		opacity: 0;
		background-color: rgb(68, 167, 223);
		text-align: center;
		line-height: 36upx;
		border-radius: 20upx;
		box-shadow: 0 0 8upx rgba(68, 167, 223, .2), 0 8upx 16upx rgba(68, 167, 223, .3)
	}

	.img-style text {
		font-size: 32upx;
		color: #fff;
	}

	.img-plus-style {
		height: 80upx;
		width: 80upx;
		position: fixed;
		bottom: 160upx;
		right: 20upx;
		z-index: 100;
	}
</style>
